<template>
    <div class="contentContainer">
        <!-- 运营图片上传模块 -->
        <el-upload
            drag
            action="http://localhost:3000/api/v1/common/image/upload"
            method="post"
            name="file"
            list-type="picture"
            :limit="1"
            :on-success="uploadImageSuccess"
            :on-error="uploadImageError"
            :on-remove="uploadImageRemove"
        >
            <el-icon
                :size="60"
                style="color: gray;"
                class="upload"    
            >
                <upload-filled />
            </el-icon>
            <div class="el-upload__text">
                拖曳图片到此或者<b>选择图片</b>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    图片类型为JPG/PNG
                </div>
            </template>
        </el-upload>
        <!-- 各种表单模块 -->
         <div class="input">
            <span>运营位名称：</span>
            <el-input
                style="width: 200px"
                v-model="name"
                placeholder="请输入内容"
            />
         </div>
         <div class="input">
            <span>运营位描述：</span>
            <el-input
                style="width: 800px;"
                v-model="content"
                placeholder="请输入内容"
            />
         </div>
         <div class="input">
            <span>落地页路由：</span>
            <el-input
                style="width: 800px;"
                v-model="uri"
                placeholder="请输入内容"
            />
         </div>
         <div class="input">
            <span>运营位状态：</span>
            <el-radio-group
                v-model="status"
                size="large"
            >
                <el-radio-button label="禁用" :value="0" />
                <el-radio-button label="启用" :value="1" />
            </el-radio-group>
         </div>
         <!-- 上传按钮 -->
          <div class="input">
            <el-button
                type="primary"
                :disabled="disableCheck"
                @click="create"
            >
                创建运营位
            </el-button>
          </div>
    </div>
</template>
<script lang="ts" setup>
// 引入模块
import { ElMessage } from 'element-plus';
import { ref, computed } from 'vue';
import { startRequest, RequestPath } from '../base/RequestWork'; 
// 定义属性
const cover = ref('');     // 封面
const name = ref('');      // 名称
const content = ref('');   // 内容
const uri = ref('');       // 落地页
const status = ref('');    // 状态
// 计算属性，控制创建按钮的禁用状态
const disableCheck = computed(() => {
    return !(cover.value.length > 0 && name.value.length > 0 && content.value.length > 0 && uri.value.length > 0);
});
// 上传成功的回调方法
const uploadImageSuccess = (data: any) => {
    ElMessage.success({
        message: '图片添加成功'
    });
    cover.value = data.url.replace(/\\/g, '/');
}
// 上传失败的回调方法
const uploadImageError = () => {
    ElMessage.error({
        message: '图片添加失败，请重试'
    });
}
// 删除上传的文件的回调方法
const uploadImageRemove = () => {
    cover.value = ''
}
// 创建运营位方法
const create = () => {
    // 发起创建运营位接口
    startRequest(RequestPath.operationalAdd, 'post', {
        name: name.value,
        content: content.value,
        cover: cover.value,
        status: status.value,
        uri: uri.value
    }).then(() => {
        ElMessage.success({
            message: '创建成功，请到运营位管理页面查看'
        });
    }).catch((error) => {
        ElMessage.error({
            message: error.response.data.error
        });
    });
}
</script>
<style scoped>
    .input {
        margin-top: 40px;
    }
</style>